<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

	<title>MUSIC系统</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.9/dist/vue.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
	<div id="music">
		<h1>MUSIC系统</h1>
		<div v-if="userIsLogin != true">
			欢迎陌生人，请<a>登录</a>!
		</div>
		<div v-if="userIsLogin == true">
			欢迎<span style="color: green;">{{userInfo.username}}</span>登录系统!
			<br/>
			<button @click="logout">点我退出登录</button>
		</div>
	</div>
	<script type="text/javascript " src="js/app.js"></script>
	<script type="text/javascript">
		var index = new Vue({
			el: "#music",
			data: {
				userIsLogin: false,
				userInfo: {},
			},
			created() {
				var me = this;
				// 通过cookie判断用户是否登录
				this.judgeUserLoginStatus();

				// http://www.music.com:8089/sso-music/index.html

				// 判断用户是否登录
				var userIsLogin = this.userIsLogin;
				if (!userIsLogin) {
					// 如果没有登录，判断一下是否存在tmpTicket临时票据
					var tmpTicket = app.getUrlParam("tmpTicket");
					console.log("tmpTicket: " + tmpTicket);
					if (tmpTicket != null && tmpTicket != "" && tmpTicket != undefined) {
						// 如果有tmpTicket临时票据，就携带临时票据发起请求到cas验证获取用户会话
						axios.defaults.withCredentials = true;
						axios.post('http://www.sso.com:8089/verifyTmpTicket?tmpTicket=' + tmpTicket)
							.then(res => {
								if (res.data.status == 200) {
									var userInfo = res.data.data;
									console.log(res.data.data);
									this.userInfo = userInfo;
									this.userIsLogin = true;
									app.setCookie("user",  JSON.stringify(userInfo));
									window.location.href = "http://www.music.com:9090/sso-music/index.html";
								} else {
									alert(res.data.msg);
									console.log(res.data.msg);
								}
							});
					} else {
						// 如果没有tmpTicket临时票据，说明用户从没登录过，那么就可以跳转至cas做统一登录认证了
						window.location.href = app.SSOServerUrl + "/login?returnUrl=http://www.music.com:9090/sso-music/index.html";
					}

					console.log(app.SSOServerUrl + "/login?returnUrl=" + window.location);
				}
			},
			methods: {
				logout() {
					var userId = this.userInfo.id;
					axios.defaults.withCredentials = true;
					axios.post('http://www.sso.com:8089/logout?userId=' + userId)
						.then(res => {
							if (res.data.status == 200) {
								var userInfo = res.data.data;
								console.log(res.data.data);
								this.userInfo = {};
								this.userIsLogin = false;
								app.deleteCookie("user");

								alert("退出成功!");
							} else {
								alert(res.data.msg);
								console.log(res.data.msg);
							}
						});
				},
				// 通过cookie判断用户是否登录
				judgeUserLoginStatus() {
					var userCookie = app.getCookie("user");
					if (
						userCookie != null &&
						userCookie != undefined &&
						userCookie != ""
					) {
						var userInfoStr = decodeURIComponent(userCookie);
						// console.log(userInfo);
						if (
							userInfoStr != null &&
							userInfoStr != undefined &&
							userInfoStr != ""
						) {
							var userInfo = JSON.parse(userInfoStr);
                            // 判断是否是一个对象
                            if ( typeof(userInfo)  == "object" ) {
                                this.userIsLogin = true;
                                // console.log(userInfo);
                                this.userInfo = userInfo;
                            } else {
                                this.userIsLogin = false;
                                this.userInfo = {};
                            }
						}
					} else {
						this.userIsLogin = false;
						this.userInfo = {};
					}
				}
			}
		});
	</script>
</body>

</html>